<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 240px;
            border: 1px solid red;
        }

        .box_title {
            position: relative;
            width: 100%;
            height: 30px;
            line-height: 30px;
            border: 1px solid pink;
            text-align: center;
        }

        .end {
            position: absolute;
            right: 16px;

        }

        .box_text {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box" id="btn">

        <div class="box_title">标题<span class="end">x</span></div>
        <div class="box_text">文本</div>

    </div>
    <script>
        // var oBtn = document.getElementById("btn");
        // var oMsg = document.getElementById("text");
        // var oChat = document.querySelector("#chat");
        // var oDel = document.getElementById("del"); 		//这里是多出来的删除按钮。不想要的可以不要
        // oBtn.onclick = function () {
        //     //判断函数的值是否为空，若不为空，则输入框的颜色变为红色
        //     if (oMsg.value == "") {
        //         oMsg.style.border = "1px solid #E84A7E";
        //     } else {
        //         //这里让颜色恢复默认
        //         oMsg.style.border = "1px solid #ccc";
        //         //创建一个新的p标签用来存放输入的内容，判断输入的顺序，这是自我聊天需要的
        //         var content = oChat.appendChild(document.createElement("p"));
        //         if (oChat.children.length % 2 == 1) {
        //             //设置内容样式，这里也可以在CSS里面写，用nth-chlid(odd/even)来写
        //             oChat.lastElementChild.style.cssText = 'float: left;padding: 5px;border-radius: 5px;margin: 0;background:#EAE9E9 ;';
        //             console.log(1234);
        //         } else {
        //             oChat.lastElementChild.style.cssText = 'float: right;padding: 5px;border-radius: 5px;margin: 0;background:limegreen;';
        //         }
        //         content.innerText = oMsg.value;
        //         oChat.scrollTop = oChat.scrollHeight;
        //     }
        //     oMsg.value = ''; //清除对话框里的内容
        // }
        // // 删除信息，不要的可以连这上面的一起删除
        // oDel.onclick = function () {
        //     oChat.lastElementChild.remove()
        // }
        function prompt(data, time) {
            let alertForm = document.createElement('div');
            alertForm.id = "promptBox";
            alertForm.style.position = "fixed";
            alertForm.style.right = "4%";
            alertForm.style.top = "6%";
            alertForm.style.margin = "0 auto";
            alertForm.style.width = "300px";
            alertForm.style.height = "50px";
            alertForm.style.background = "#00bb9c";
            alertForm.style.textAlign = "center";
            alertForm.style.borderRadius = "5px";
            alertForm.style.border = "1px solid #ccc";
            alertForm.style.padding = '14px 22px';
            alertForm.style.fontSize = '14px';
            alertForm.style.fontFamily = "微软雅黑";
            alertForm.style.fontWeight = 'normal';
            alertForm.style.color = '#fff';
            alertForm.style.opacity = '.8';
            alertForm.style.zIndex = "10001";
            alertForm.innerHTML = 11111111;
            document.getElementsByTagName("body")[0].appendChild(alertForm);
            // setTimeout(function () {
            //     alertForm.style.display = "none";
            // }, time)
        }
        document.getElementById('btn').addEventListener('click', () => { prompt('1111', 10) })

    </script>
</body>

</html>